<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-06-08 07:51:53
 * @LastEditTime: 2019-10-13 23:12:49
 * @LastEditors: Please set LastEditors
 -->
<template>
    <view class="about-us-page">
        <!-- banner图片 -->
        <!-- <view class="banner">
           <image
             src="../static/images/about-us-banner.png"
             mode="scaleToFill"
             lazy-load="false">
           </image>
        </view> -->
        <!-- 产品简介 -->
        <view class="product-intro item">
            <aboutUsTitle title="金融产品“互联网+”智能服务平台"/>
            <view class="content">
                平台具有强大的资金吸引能力、良好的市场开拓能力、完善的风控体系，稳定的合作体系。
            </view>
        </view>
        <!-- 解决方案 -->
        <view class="solution item">
             <aboutUsTitle title="我们的解决方案"/>
            <view class="image-text">
                <view class="solution-item" v-for="(item,index) in solutionList" :key="index">
                    <view class="img">
                       <image
                         :src="item.src"
                         mode="scaleToFill"
                         lazy-load="false">
                       </image>
                    </view>
                     <view class="keyword">
                        {{item.keyValue}}
                    </view>
                </view>
            </view>
        </view>
        <!-- 合作伙伴 -->
        <view class="partner item">
             <aboutUsTitle title="提供专业人数·为合作伙伴赋能"/>
             <view class="bg-text">
                 <view class="bg-text-item" v-for="(item,index) in partnerList" :key="index" :style="{backgroundImage:'url(' + item.bg + ')'}">
                      <view class="label">{{item.keyValue}}</view>
                      <view class="describe">
                           <text>{{item.describe}}</text>
                        </view>
                 </view>
             </view>
        </view>
        <!-- 共享平台 -->
        <view class="share item">
              <aboutUsTitle title="开放共享平台"/>
              <view class="share-img">
                  <image 
                   src="../static/images/about-us-img.png"
                   mode="scaleToFill"
                   lazy-load="false">
                  </image>
              </view>
        </view>
        <customerPhone/>
    </view>
</template>
<script>
// #ifdef H5
    document.title=`关于我们`
// #endif
import aboutUsTitle from "@/components/aboutUsTitle/aboutUsTitle.vue"
import customerPhone from "@/components/customerPhone/customerPhone.vue"
export default {
    components:{
      aboutUsTitle,
      customerPhone
    },
    data(){
        return{
           partnerList:[
                {
                    bg:"../static/images/bg-blue.png",
                    keyValue:"业务拓展能力",
                    describe:" 布局全国主要城市 汇聚行业资源"
                },{
                    bg:"../static/images/bg-red.png",
                    keyValue:"产品定制能力",
                    describe:"专业产品、流程定制团队 提升金融服务效率"
                },{
                    bg:"../static/images/bg-yellow.png",
                    keyValue:"数据化定制能力",
                    describe:"连续供需 通过规则引擎 精准匹配产品"
                },{
                    bg:"../static/images/bg-purple.png",
                    keyValue:"运营能力",
                    describe:"线下运营中心 业务流程闭环"
                }
            ],
            solutionList:[
                {
                    src:"../static/images/icon_link.png",
                    keyValue:"链接",
                    key:"key1",
                    describe:"连接供需双方，优化服务"
                },{
                    src:"../static/images/icon_share.png",
                    keyValue:"共享",
                    key:"key2",
                    describe:"用户类聚，精准匹配"
                },{
                    src:"../static/images/icon_rule.png",
                    keyValue:"规则",
                    key:"key3",
                    describe:"规则引擎，智能推荐"
                },{
                    src:"../static/images/icon_data.png",
                    keyValue:"数据",
                    key:"key4",
                    describe:"大数据支持"
                }
            ]
        }
    }
    
}
</script>
<style lang="less" scoped>
.about-us-page{
    background: #ffffff;
   .banner{
       image{
           width: 100%;
           height: 350upx;
       }
   }
   .item{
        width:702upx;
        background:rgba(255,255,255,1);
        box-shadow:0px 3px 6px rgba(0,0,0,0.16);
        margin: 24upx auto;
        overflow: hidden;
        .content{
            font-size:24upx;
            font-family:PingFang-Semibold;
            font-weight:bold;
            line-height:36upx;
            color:rgba(102,102,102,1);
            letter-spacing:12upx;
            padding: 0 15upx 10upx;
        }
   }
   .solution{
       .image-text{
           display: flex;
           justify-content: space-between;
           align-items: center;
           padding: 0 48upx 24upx;
           .solution-item{
               text-align: center;
               height: auto;
               .img{
                    height: 48upx;
                   image{
                       width: 48upx;
                       height: 48upx;
                   }
               }
                &:nth-child(3){
                    image{
                        width: 34upx;
                    }
                }
                &:nth-child(4){
                    image{
                        width: 43upx;
                        height: 39upx;
                    }
                }
               .keyword{
                    height:33upx;
                    font-size:24upx;
                    font-family:PingFang-Semibold;
                    font-weight:bold;
                    line-height:33upx;
                    color:rgba(124,124,124,1);
                    margin-top: 8upx;
                }
           }
       }
   }
   .partner{
       .bg-text{
           &-item{
              width:654upx;
              height:160upx;
              margin: 0 auto;
              background-size: 100% 100%;
              background-repeat: no-repeat;
              margin-bottom: 12upx;
              overflow: hidden;
               .label{
                    text-align: center;
                    height:36upx;
                    font-size:26upx;
                    font-family:PingFang-Semibold;
                    font-weight:bold;
                    line-height:29upx;
                    color:rgba(255,255,255,1);
                    margin: 20upx 0 32upx;
               }
               .describe{
                    text-align: center;
                    height:36upx;
                    font-size:26upx;
                    font-family:PingFang-Semibold;
                    font-weight:600;
                    line-height:36upx;
                    color:rgba(255,255,255,1);
               }
           }
       }
   }
   .share{
       .share-img{
           width: 526upx;
           height: 226upx;
           margin: 0 auto 22upx;
            image{
                width: 526upx;
               height: 226upx;
            }
            position: relative;
            .text{
                font-size:24upx;
                font-family:PingFangSC-Regular;
                font-weight:400;
                color:rgba(51,51,51,1);
                line-height:35upx;
                position: absolute;
            }
            .l-t{
                top: -10upx;
                left: 10upx;
            }
            .r-t{
                right: 0;
                top:-10upx;
            }
            .l-b{
                bottom: 20upx;
                left: 50upx;
            }
            .r-b{
                right: 50upx;
                bottom:20upx;
            }
       }
   }
   .contact-us{
        width:750upx;
        height:240upx;
        background:url(../static/images/contact-us-img.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        text-align: center;
        color:#ffffff;
        font-size: 26upx;
        .text{
            padding: 53upx 0 50upx;
            font-size: 34upx;
            line-height: 34upx;
            text-align: center;
        }
   }
}
</style>
